<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: true
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: true,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: false,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
      }
    ];
    
    //  渲染
    console.log(data);

    let isCheckAll = data=>data.every(item=>item.checked);

    function renderDom(data){
        let listEle = document.querySelector('#list');
        listEle.innerHTML = "";

        // 数据渲染
        data.forEach((item,key) => {
            let liEle = document.createElement("li");
            liEle.innerHTML = `
          <input type="checkbox" ${item.checked ? 'checked' : ''} />
          <span>${item.title}</span>
          ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
          <a href="javascript:;" class="remove">删除</a>
        `;

            // 事件委派 把事件委托给li
            liEle.onclick = function(e){
                // 点击收藏
                if(e.target.classList.contains("collect")){
                    data[key].collect = true;
                    renderDom(data);
                }
                // 取消收藏
                if(e.target.classList.contains("cancelCollect")){
                    data[key].collect = false;
                    renderDom(data);
                }


                // 删除li
                if(e.target.classList.contains("remove")){
                    data.splice(key,1);
                    renderDom(data);
                }

                // 点击checkbox事件
                if(e.target.nodeName==="INPUT"){
                    data[key].checked = e.target.checked
                    console.log(data);
                    document.querySelector("#checkAll").checked =data.length && isCheckAll(data);
                }
            }


            listEle.appendChild(liEle);
        })
    }
    renderDom(data);



    // 点击全选的时候切换。所有的checjbox都需要全选
    document.querySelector("#checkAll").onclick = function(){
        data.forEach(item=>{
            console.log(this.checked);
            item .checked = this.checked;
        })
        renderDom(data);
    }

    // 删除指定音乐
    document.querySelector("#remove").onclick = function(){
        data = data.filter(item=>!item.checked);
        renderDom(data);
    }

    // 添加音乐
    let inputEle = document.querySelector("#newInfo");
    document.querySelector("#add").onclick = function(){
        let title=inputEle.value;
        if (!title.trim()) { // 如果输入内容为空,就退出  str.trim() 字符串去掉首尾的空格 
                        alert('请输入内容');
                        return;
                    }
        let obj = {
        id:data.length,
        title,   
        checked:false,
        collect:false
        }
        data.push(obj);
      inputEle.value = "";
      renderDom(data);
    }
  </script>
</body>

</html>